<!--实名制首页-->
<template>
  <view class="realname-box">
    <view class="realname-info">
      <h4>{{getProjectList.companyName}}</h4>
      <view class="iconlist">
        <view class="item" v-for="(e,i) in menulist" :key="i" @click="menuitem(i)">
          <i :class="['iconfont', e.icon]"></i>
          <span>{{e.name}}</span>
        </view>
      </view>
    </view>
    <!-- 今天考勤人数、进场人数 -->
    <view class="online-box">
      <view class="canbgcon2">
          <view class="canbg2"><view class="bg"><view class="bg2"><view class="chart-box"><canvas canvas-id="ona" id= "ona"></canvas></view></view></view></view>
          <view class="canbg2"><view class="bg"><view class="bg2"><view class="chart-box"><canvas canvas-id="onc" id= "onc"></canvas></view></view></view></view>
      </view>
      <view class="texts">
        <text class="txt">今日考勤人数</text>
        <text class="txt">今日进场人数</text>
      </view> 
    </view>
    <!-- 考勤统计 -->
    <view class="kaiqi">
      <view class="data-box">
          <view class="top"><h4>考勤统计</h4><navigator url="" class="alink">查看详细信息</navigator></view>
          <view class="d1 dt">
              <text class="tt">今日考勤</text>
              <view class="lbg"><view class="blue" :style="{width:getNowCardWorkers.percent}"></view></view>
              <text class="num">{{getNowCardWorkers.sum}}</text>
          </view>
          <view class="d1">
              <text class="tt">昨日考勤</text>
              <view class="lbg"><view class="blue" :style="{width:getNowCardWorkers.yesterdayPercent}"></view></view>
              <text class="num">{{getNowCardWorkers.yesterdayCard}}</text>
          </view>
          <view class="d1 dtt">
              <text class="tt">已在线</text>
              <view class="lbg"><view class="green" :style="{width:getNowInWorkers.percent}"></view></view>
              <text class="num">{{getNowInWorkers.nowInWorkers}}</text>
          </view>
          <view class="d1">
              <text class="tt">未在线</text>
              <view class="lbg"><view class="orange" :style="{width:notINWorkerspre}"></view></view>
              <text class="num">{{getNowInWorkers.notINWorkers}}</text>
          </view>
      </view>
    </view>
    <!--近一周考勤图表-->
    <view class="oneWeekReport">
        <view class="top"><h4>近一周考勤图表</h4><text class="tips">近一周平均每天考勤 / {{getTswkCardRecord.avg || 0}}人</text></view>
      <view class="canbgcon">
        <view class="canbg">
          <canvas canvas-id="oneWeekReport" id="oneWeekReport"></canvas>
        </view>
      </view>
    </view>
    
    <!--工种分布图表-->
    <view class="workChart">
        <view class="top"><h4>工种分布图表</h4><text class="tips">共{{getProfessionList.total || 0}}个工种</text></view>
      <view class="canbgcon">
        <view class="canbg"><canvas canvas-id="workChart" id="workChart" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas></view>
      </view>
    </view>
  </view>   
</template>
<script>
  let workChart = null
  import uCharts from '@/utils/u-charts.js'
    export default {
      props:['projectInfo'],
      data () {
        return{
          tabval: 0,
          pixelRatio:1,
          notINWorkerspre: '0%',
          geUserInfoSpread: '', // 人员构成表
          getProjectList: {companyName:'公司名称'}, // 获取项目列表
          getProjectInfo: '', // 当前项目在线人数
          getNowInWorkers: '', // 在场人数
          getNowCardWorkers: '', // 考勤人数
          nowPercent: 10, // 考勤人数百分比
          nowPercent2: 10, // 在场人数百分比
          getProfessionList: '', // 获取工种人数
          getProjectTemperature: '', //项目体温
          getTswkCardRecord: '', // 近一周打卡数据
          chartBgColor: ['#218de7', '#20c529', '#ff9f40', '#ff6384'],
          chartBgColor2: ['rgba(33, 141, 231, 0.6)' , 'rgba(32, 197, 41, 0.6)', 'rgba(255, 159, 64, 0.6)', 'rgba(255, 99, 132, 0.6)'],
          menulist: [
            {
              name: '概况',
              icon: 'icongaikuang',
              url: './realname_about'
            },
            {
              name: '人员',
              icon: 'iconrenyuan',
              url: './realname_member'
            },
            {
              name: '班组',
              icon: 'iconbanzu',
              url: './realname_group'
            }
          ]
        }
      },
      mounted () {
        this.$axios({
           url: "UserApp/Source/getData",
           data: this.projectInfo ,
           type: "smart"
         }).then(res => {
            if(res.data.Code == 200000) {
              this.geUserInfoSpread = res.data.returnData.data.geUserInfoSpread
              this.getProjectList = res.data.returnData.data.getProjectList[0]
              this.getProjectInfo = res.data.returnData.data.getProjectInfo
              this.getNowInWorkers = res.data.returnData.data.getNowInWorkers
              this.getNowCardWorkers = res.data.returnData.data.getNowCardWorkers
              this.getProfessionList = res.data.returnData.data.getProfessionList
              this.getProjectTemperature = res.data.returnData.data.getProjectTemperature
              this.getTswkCardRecord = res.data.returnData.data.getTswkCardRecord
              this.notINWorkerspre = 
              (parseInt(this.getNowInWorkers.notINWorkers) / 
              (parseInt(this.getNowInWorkers.nowInWorkers) + 
              parseInt(this.getNowInWorkers.notINWorkers))) * 100 + '%'
              this.getServerData()
              this.oneWeekReport()
              this.workChart()
            } else {
                uni.showToast({
                    title: res.data.returnMsg,
                    icon: 'none',
                    mask: true,
                    duration: 2000
                })
            }
         })
      },
      methods: {
        // 菜单
        menuitem (idx) {
          var url = this.menulist[idx].url
          uni.navigateTo({
             url: url + "?projectid=" + this.projectInfo.project_id + "&appid=" + this.projectInfo.app_id + "&apptoken=" + this.projectInfo.token
          })
        },
        getServerData () {
          var chartData1 =  {
            series: [{
              name: '考勤人数',
              data: parseFloat(this.getNowCardWorkers.percent) / 100,
              color: this.chartBgColor[0],
              num: this.getNowCardWorkers.cardWorkers
            }]
          }
          var chartData2 =  {
            series: [{
              name: '进场人数',
              data: parseFloat(this.getNowInWorkers.percent) / 100,
              color: this.chartBgColor[1],
              num: this.getNowInWorkers.nowInWorkers
            }]
          }
          this.showArcbar('ona', chartData1) // u-charts.js插件
          this.showArcbar('onc', chartData2)
        },
        showArcbar(canvasId,chartData){
          new uCharts({
            $this:this,
            canvasId: canvasId,
            type: 'arcbar',
            fontSize:11,
            legend:{show:false},
            background:'#FFFFFF',
            series: chartData.series,
            animation: true,
            width:uni.upx2px(230),
            height:uni.upx2px(230),
            dataLabel: true,
            title: {
              name: chartData.series[0].num,//这里我自动计算了，您可以直接给任意字符串
              color: chartData.series[0].color,
              fontSize: 20*this.pixelRatio
            },
            extra: {
              arcbar:{
                type:'default',
                width:6*this.pixelRatio
              }
            }
          });
          
        },   
        // 工种分布图表
        workChart () {
          var chartData = {
            categories: [],
            series: [{data:[],color:this.chartBgColor[0]}]
          }
          var labels_arry = []
          var data_arry = []
          for (var i = 0; i < this.getProfessionList.professionList.length; i++) {
            data_arry.push(this.getProfessionList.professionList[i].peopleNum)
            labels_arry.push(this.getProfessionList.professionList[i].name)
          }
          chartData.categories = labels_arry
          chartData.series[0].data = data_arry.map(Number)
          var max = chartData.series[0].data.sort(function(a,b){return a<b?1:-1})[0] + 50

          workChart = new uCharts({
              $this:this,
              canvasId: 'workChart',
              type: 'column',
              legend:{show:false},
              fontSize:11,
              background:'#FFFFFF',
              width:uni.upx2px(600),
              height:uni.upx2px(400),
              enableScroll: true,
              animation: true,
              categories: chartData.categories,
              series: chartData.series,
              xAxis: {
                disableGrid:true,
                itemCount:6,
                scrollShow:false,//新增是否显示滚动条，默认false
                scrollAlign:'left',//滚动条初始位置
                rotateLabel: true,
                fontSize: 10
              },
              yAxis: {
              data: [
                {
                  axisLine: false,
                  min:0,
                  max: max
                }
              ],
            },
              dataLabel: true,
              extra: {
                column: {
                  type:'group',
                  width: 22*this.pixelRatio
                }
              }
          })        
        },
        // 近一周考勤图表
        oneWeekReport () {
          var chartData =  {
            categories: this.getTswkCardRecord.weeks,
            series: [{
              name: '近一周考勤人数',
              data: this.getTswkCardRecord.all,
              color: this.chartBgColor[0],
              legendShape: 'circle'
            }, {
              name: '上一周考勤人数',
              data: [400, 300, 100, 150,200,250, 400],
              color: this.chartBgColor[1],
              legendShape: 'circle'
            }]
          }
          new uCharts({
            $this:this,
            canvasId: 'oneWeekReport',
            type: 'area',
            fontSize:11*this.pixelRatio,
            legend:{show:true},
            dataLabel:false,
            dataPointShape:false,
            background:'#FFFFFF',
            categories: chartData.categories,
            series: chartData.series,
            animation: true,
            xAxis: {
              disableGrid:true,
              boundaryGap: 'justify'
            },
            yAxis: {
              data: [
                {
                  axisLine: false
                }
              ],
              min:0,
            },
            width:uni.upx2px(600),
            height:uni.upx2px(400),
            extra: {
              area:{
                type: 'curve'
              }
            }
          })
        },
        touchLineA(e){
          workChart.scrollStart(e)
        },
        moveLineA(e) {
          workChart.scroll(e)
        },
        touchEndLineA(e) {
          workChart.scrollEnd(e)
        }
      }
    }
</script>
<style lang="scss">
</style>
